<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单管理系统</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 800px; margin: 0 auto; }
        .section { margin-bottom: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
        button { padding: 8px 15px; margin: 5px; cursor: pointer; }
        input { padding: 8px; margin: 5px; width: 200px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>订单管理系统</h1>
        
        <div class="section">
            <h2>创建订单</h2>
            <input type="number" id="amount" placeholder="订单金额" step="0.01">
            <button onclick="createOrder()">创建订单</button>
            <div id="orderResult"></div>
        </div>
        
        <div class="section">
            <h2>查询/支付订单</h2>
            <input type="text" id="orderNo" placeholder="订单号">
            <button onclick="getOrder()">查询订单</button>
            <button onclick="payOrder()">支付订单</button>
            <div id="orderInfo"></div>
        </div>
    </div>
    
    <script>
        function createOrder() {
            const amount = document.getElementById('amount').value;
            if (!amount) {
                alert('请输入订单金额');
                return;
            }
            
            axios.post('/api/orders', { amount: parseFloat(amount) })
                .then(response => {
                    document.getElementById('orderResult').innerHTML = 
                        `订单创建成功! 订单号: ${response.data.orderNo}`;
                })
                .catch(error => {
                    console.error(error);
                    alert('创建订单失败');
                });
        }
        
        function getOrder() {
            const orderNo = document.getElementById('orderNo').value;
            if (!orderNo) {
                alert('请输入订单号');
                return;
            }
            
            axios.get(`/api/orders/${orderNo}`)
                .then(response => {
                    const order = response.data;
                    let status = '待支付';
                    if (order.status === 1) status = '已支付';
                    if (order.status === 2) status = '已取消';
                    
                    document.getElementById('orderInfo').innerHTML = 
                        `订单号: ${order.orderNo}<br>
                        金额: ${order.amount}<br>
                        状态: ${status}<br>
                        创建时间: ${order.createTime}`;
                })
                .catch(error => {
                    console.error(error);
                    alert('查询订单失败');
                });
        }
        
        function payOrder() {
            const orderNo = document.getElementById('orderNo').value;
            if (!orderNo) {
                alert('请输入订单号');
                return;
            }
            
            axios.post(`/api/orders/${orderNo}/pay`)
                .then(response => {
                    if (response.data) {
                        alert('支付成功');
                        getOrder(); // 刷新订单信息
                    } else {
                        alert('支付失败，订单可能已支付或已取消');
                    }
                })
                .catch(error => {
                    console.error(error);
                    alert('支付失败');
                });
        }
    </script>
</body>
</html>